<template>
  <div class="student">
    <header>
      <span>
        <span>学生姓名</span>
        <el-input v-model="studentid" placeholder="请输入关键字" style="width:200px;margin:0 12px"></el-input>
      </span>
      <span>
        <span>课程阶段</span>
        <el-select v-model="value" placeholder="请选择" style="width:200px;margin:0 12px">
          <el-option
            v-for="item in lessonList"
            :key="item.key"
            :label="item.lesson"
            :value="item.key">
          </el-option>
        </el-select>
      </span>
      <span>
        <span>学历</span>
        <el-select v-model="values" placeholder="请选择" style="width:200px;margin:0 12px">
          <el-option
            v-for="(item,index) in education"
            :key="index"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </span>
       <p>
        <el-link type="primary" style="margin-left:8px" @click="studentAdd">添加学生</el-link>
        <el-button type="primary" style="float: right;" icon="el-icon-search" @click="roleSearch">搜索</el-button>
      </p>
    </header>

     <el-table
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
       :header-cell-style="{background:'#EBEEF5'}"
      style="width: 100%">
      <el-table-column prop="studentid" label="学号" ></el-table-column>
      <el-table-column prop="name" label="学生名称" ></el-table-column>
      <el-table-column prop="age" label="年龄" ></el-table-column>
      <el-table-column prop="sex" label="性别" ></el-table-column>
      <el-table-column prop="schoolid" label="所属学院" ></el-table-column>
      <el-table-column prop="classid" label="所属班级" >  </el-table-column>
      <el-table-column prop="courseid" label="当前课程" >
         <template slot-scope="scope">
         <el-tag type="success" >{{
            lessonList.filter(item=>item.key*1===scope.row.courseid*1)[0]?lessonList.filter(item=>item.key*1===scope.row.courseid*1)[0].lesson:null
           }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="education" label="学历" >
      </el-table-column>
      <el-table-column prop="date" label="操作" >
        <template slot-scope="scope">
        <el-button type="text" size="mini" @click="studentEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页  -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5,8,10]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div> 
    <!-- 分页结束 -->

    <!-- 编辑 -->
    <el-dialog title="学生信息编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"  style="width:215px" ></el-input>
        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-select v-model="form.age" placeholder="请选择活动区域">
            <el-option :label="item" :value="item" v-for="(item,index) in ageArr" :key="index"></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.sex" placeholder="请选择活动区域">
            <el-option label="女" value="女" ></el-option>
            <el-option label="男" value="男" ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属学院" :label-width="formLabelWidth">
          <el-select v-model="form.schoolid" placeholder="请选择活动区域">
            <el-option :label="item.school" :value="item.school+''" v-for="(item,index) in schoolList" :key="index"></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="所属班级" :label-width="formLabelWidth">
          <el-select v-model="form.classid" placeholder="请选择活动区域">
            <el-option :label="item.classid" :value="item.classid+''" v-for="(item,index) in classArr" :key="index"></el-option>
          </el-select>
        </el-form-item>

         <el-form-item label="学历" :label-width="formLabelWidth">
          <el-select v-model="form.education" placeholder="请选择活动区域">
            <el-option :label="item" :value="item" v-for="(item,index) in education" :key="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="当前课程" :label-width="formLabelWidth">
          <el-select v-model="form.courseid" placeholder="请选择活动区域">
            <el-option :label="item.lesson" :value="index+1+''" v-for="(item,index) in lessonList" :key="index"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="open">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑结束 -->
  </div>
</template>

<script>
export default {
  data(){
    return {
      studentid:'',
      options:"",
      value:'',
      values:'',
     
      tableData:[],//学生列表
      lessonList:[],//专业列表
      schoolList:[],//学院名称
      classArr:[],//班级列表
      education:["小学","初中","高中","大学","本科","中专","大专","其他"],
      ageArr:Array.from(new Array(36).keys()).splice(15,),
      pagesize:5,
      currentPage:1,
      // 编辑
       dialogFormVisible: false,
        form: {
          name: '',
          studentid:"",
          age:'',
          sex:'',
          education:'',
          schoolid:'',
          classid:'',
          courseid:'',//课程
        },
        formLabelWidth: '120px'
    }
  },
  mounted(){
    this.initData()
  },
  methods:{
    // 编辑数据
    studentEdit(row){
      this.form.studentid=row.studentid
      this.dialogFormVisible = true
      this.form.name = row.name
      this.form.age = row.age
      this.form.sex = row.sex
      this.form.schoolid = row.schoolid
      this.form.education = row.education
      this.form.courseid = this.lessonList.filter(item =>  item.key===row.courseid*1)[0].lesson
      this.form.classid = row.classid
    },
    // 提交编辑
    open(){
      this.dialogFormVisible = false  ;
      this.$httpAxios(this.$api.STUDENT_EDIT({obj:this.form}),res=>{
        this.$message({message: res.msg,type: 'success'});
        this.initData()
      })   
    },
    // 添加学生
    studentAdd(){
      this.$router.push('/studentadd')
    },
    // 获取数据
    initData(){
      this.$httpAxios(this.$api.STUDENT_LIST(),res=>{
        this.tableData=res.data.data
        this.lessonList=res.data.lessonList
        this.schoolList=res.data.schoolList
        this.classArr = res.data.student
      })
    },
   
   
    roleSearch(){
      let {value,values,studentid}=this
       this.$httpAxios(this.$api.STUDENT_ERCH({obj:{courseid:value,education:values,name:studentid}}),res=>{
              this.tableData=res.data      
        })
    },
        // 分页器
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    // 每张显示的个数
    handleSizeChange(size) {
      this.pagesize = size;
    },
  }
   }
</script>
<style scoped>
  .pagination{
    margin: 12px 0;
  }
</style>